<template>
  <div>
    <div class = "card" style="margin-bottom: 5px;">
      <el-input style="width: 240px; margin-right: 10px" v-model="data.name" placeholder="请输入名称查询" prefix-icon="Search"></el-input>
      <el-button type="primary" @click="load">查 询</el-button>
      <el-button type="warning" @click="reset">重 置</el-button>
    </div>
    <div class = "card" style="margin-bottom: 5px">
      <el-button v-if="data.user.role === 'owner'" type="primary" @click="handleadd">添 加</el-button>
      <el-button type="danger" @click="deleteBatch">批 量 删 除</el-button>
    </div>
    <div class="card" style="margin-bottom: 5px">
      <el-table :data="data.tableData" border stripe string @selection-change="handleSelectionChange">
        <el-table-column type="selection" width="55"/>
        <el-table-column label="序号" prop = "id" width="150"/>
        <el-table-column label="分类名称" prop = "name" width="150"/>
        <el-table-column label="分类描述" prop = "description"/>
        <el-table-column label="当前房间数量" prop = "num"/>
        <el-table-column label="操作" width="120">
          <template #default="scope">

            <el-button type="primary" :icon="Edit" circle @click="handleUpdate(scope.row)" ></el-button>
            <el-button type="danger"  :icon="Delete" circle @click="del(scope.row.id)"></el-button>
          </template>
        </el-table-column>
      </el-table>
      <div style="margin-bottom: 15px">
        <el-pagination
            @size-change="load"
            @current-change="load"
            v-model:current-page="data.pageNum"
            v-model:page-size="data.pageSize"
            :page-sizes="[5,10,15,20]"
            backgroudr
            layout="total, sizes, prev, pager, next,jumper"
            :total="data.total"
        />
      </div>
    </div>
    <el-dialog :title="data.dislogTitle1" v-model="data.formVisible1"  width="500">
      <el-form :model="data.form" style="padding-right: 50px;padding-top: 20px">

        <el-form-item label="分类名称" label-width="80px">
          <el-input  v-model="data.form.name"  placeholder="请输入分类名称"autocomplete="off" />
        </el-form-item>

        <el-form-item label="分类描述" label-width="80px">
          <el-input v-model="data.form.description" placeholder="请输入分类描述" autocomplete="off" />
        </el-form-item>

      </el-form>
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="data.formVisible1 = false">取消</el-button>
          <el-button type="primary" @click="save">保存</el-button>
        </div>
      </template>
    </el-dialog>


  </div>

</template>

<script setup>
import request from "../../utils/request.js";
import {Edit,Delete,Search} from '@element-plus/icons-vue'
import {ElMessage,ElMessageBox} from "element-plus";
import {reactive, ref} from "vue";
const data = reactive({
  user:JSON.parse(localStorage.getItem('localStorageUser')),
  name:null,
  tableData:[],
  pageNum:1,
  pageSize:10,
  total:0,
  formVisible1:false,
  dislogTitle1:'',
  ids:[],
  form:{
    id:null,
    username:null,
    name:null,
    phone:null,
    email:null,
    role:null
  }
})

const load =()=>{

  request.get('/roomType/SelectPage',{

    // headers:{
    //   "Authorization":tokenStore.token
    //
    // },
    params:{
      pageNum:data.pageNum,
      pageSize:data.pageSize,
      name:data.name

    },

  }).then(res=>{
    data.tableData = res.data.list
    data.total = res.data.total
  })
}
load()

const reset = ()=>{
  data.name = null
  load()
}


const handleadd = ()=>{
  data.formVisible1 = true
  data.dislogTitle1 = '添加房间分类'
  data.form = {}
}

const handleUpdate= (row)=>{
  data.form = JSON.parse(JSON.stringify(row))//深拷贝一个对象，这样编辑就不会影响行数据
  data.dislogTitle1 = '编辑房间分类'
  data.formVisible1 = true
}

const handleSelectionChange = (rows)=>{//返回选中所有的行
  //从选中的行数组里取出username组成一个新的数组ids
  data.ids = rows.map(row=>row.id)
  console.log(data.ids)
}


const save =()=> {//有id为编辑，没有为新增
  data.form.id?update():add()
  data.formVisible1 = false
}

const add = ()=>{

  request.post('/roomType/add', data.form).then(res =>{
    if (res.code === '200'){
      ElMessage.success('操作成功')
      load()
    }else {
      ElMessage.error(res.msg)
    }
  })

}

const update = ()=>{
  request.put('/roomType/update', data.form).then(res =>{
    if (res.code === '200'){
      ElMessage.success('操作成功')
      load()
    }else {
      ElMessage.error(res.msg)
    }
  })

}

const del =(id)=>{
  ElMessageBox.confirm('确定要删除该用户吗？', '提示', {type: 'warning'}).then(()=>{

    request.delete('/roomType/delete', {
      params:{
        id:id
      }
    }).then(res =>{
      if (res.code === '200'){
        ElMessage.success('操作成功')
        load()
      }else {
        ElMessage.error(res.msg)
      }
    })
  }).catch()
}

const deleteBatch = ()=>{
  if (data.ids.length === 0) {
    ElMessage.warning('请选择要删除的用户')
    return
  }
  ElMessageBox.confirm('确定要删除这些用户吗？', '提示', {type: 'warning'}).then(()=>{
    request.delete('/roomType/deleteBatch', {data:data.ids}).then(res =>{
      if (res.code === '200'){
        ElMessage.success('操作成功')
        load()
      }else {
        ElMessage.error(res.msg)
      }
    })
  }).catch()
}

</script>

<style scoped>
.avatar-uploader .avatar {
  width: 178px;
  height: 178px;
  display: block;
}
</style>

<style>
.avatar-uploader .el-upload {
  border: 1px dashed var(--el-border-color);
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: var(--el-transition-duration-fast);
}

.avatar-uploader .el-upload:hover {
  border-color: var(--el-color-primary);
}

.el-icon.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  text-align: center;
}
</style>